<template>
  <div>
    <img v-if="imgUri" style="height: 120px;margin-right: 10px;" :src="imgUri | imageUri">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="update" />
    <el-dialog
      title="用户签章文件"
      :visible="visible"
      width="900px"
      :modal="false"
      :before-close="closeForm"
      :close-on-click-modal="false"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <el-card>
        <div slot="header" style="text-align: right;">
          <el-button size="small" type="success" icon="el-icon-plus" @click="addSign">添加签章</el-button>
        </div>
        <div class="signList">
          <div v-for="item in files" :key="item.Id" :class="'sign' + (chioseFile != null && item.Id == chioseFile.Id ? ' active': '') " @click="chioseSign(item)">
            <el-button type="text" class="drop" icon="el-icon-delete" circle size="small" @click="drop(item)" />
            <img :src="item.FileUri |imageUri">
          </div>
        </div>
      </el-card>
      <div slot="footer" style="text-align: center; margin-top: 20px">
        <el-button @click="resetChiose">重 置</el-button>
        <el-button :loading="loading" type="primary" @click="save">保 存</el-button>
      </div>
      <empSignature :file-key="classtify" :visible.sync="addVisible" @save="saveFile" />
    </el-dialog>
  </div>
</template>
<script>
import * as empFileApi from '@/api/emp/empFile'
import * as fileApi from '@/api/base/file'
import empSignature from './empSignature.vue'
export default {
  components: {
    empSignature
  },
  props: {
    linkType: {
      type: String,
      default: null
    },
    linkPk: {
      type: String,
      default: null
    },
    tag: {
      type: String,
      default: null
    },
    value: {
      type: String,
      default: null
    },
    fileUri: {
      type: String,
      default: null
    },
    isCopy: {
      type: Boolean,
      default: true
    },
    isAuto: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chioseFile: null,
      curFileId: null,
      files: null,
      classtify: 'EmpSignatureFile',
      visible: false,
      addVisible: false,
      imgUri: null,
      loading: false
    }
  },
  computed: {
  },
  watch: {
    value: {
      handler(val) {
        if (val && this.curFileId !== val) {
          this.curFileId = val
          this.loadFile()
        }
      },
      immediate: true
    },
    isAuto: {
      handler(val) {
        if (val && this.linkType) {
          this.loadDefFile()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    update() {
      this.visible = true
      this.reset()
    },
    async loadDefFile() {
      const file = await empFileApi.FindLast(this.classtify)
      if (file != null) {
        this.chioseFile = file
        this.copyFile()
      }
    },
    async loadFile() {
      const file = await fileApi.getFile(this.value)
      this.imgUri = file.FileUri
      this.$emit('update:fileUri', file.FileUri)
    },
    drop(item) {
      const title = '确认删除该签章?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(item)
      })
    },
    async submitDrop(item) {
      await empFileApi.Delete(item.Id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      const index = this.files.findIndex(c => c.Id === item.Id)
      this.files.splice(index, 1)
      if (this.chioseFile != null && item.Id === this.chioseFile.Id) {
        this.chioseFile = null
      }
    },
    addSign() {
      this.addVisible = true
    },
    chioseSign(item) {
      if (this.chioseFile != null && item.Id === this.chioseFile.Id) {
        this.chioseFile = null
      } else {
        this.chioseFile = item
      }
    },
    save() {
      this.visible = false
      this.loading = true
      if (this.chioseFile == null) {
        this.curFileId = null
        this.imgUri = null
        this.$emit('input', null)
        this.$emit('update:fileUri', null)
        this.$emit('change', null, null)
        this.loading = false
      } else if (this.isCopy) {
        this.copyFile()
      } else {
        this.curFileId = this.chioseFile.FileId
        this.imgUri = this.chioseFile.FileUri
        this.$emit('input', this.chioseFile.FileId)
        this.$emit('update:fileUri', this.chioseFile.FileUri)
        this.$emit('change', this.curFileId, this.chioseFile)
      }
    },
    async copyFile() {
      const file = await fileApi.copy({
        FileId: this.chioseFile.FileId,
        DirKey: this.linkType,
        LinkBizPk: this.linkPk,
        Tag: this.tag
      })
      this.curFileId = file.FileId
      this.imgUri = file.FileUri
      this.$emit('input', file.FileId)
      this.$emit('update:fileUri', file.FileUri)
      this.$emit('change', this.curFileId, file)
      this.loading = false
    },
    async saveFile(file) {
      const id = await empFileApi.Add({
        Classify: this.classtify,
        FileId: file.FileId,
        FileUri: file.FileUri
      })
      const add = {
        Id: id,
        FileId: file.FileId,
        FileUri: file.FileUri
      }
      this.files.splice(0, 0, add)
      this.chioseSign(add)
    },
    async reset() {
      const res = await empFileApi.Gets(this.classtify)
      if (res) {
        this.files = res
      } else {
        this.files = []
      }
    },
    resetChiose() {
      if (this.curFileId == null) {
        this.chioseFile = null
      } else {
        this.chioseFile = this.files.find(c => c.FileId === this.curFileId)
      }
    },
    closeForm() {
      this.visible = false
    }
  }
}
</script>
<style scoped>
  .signList {
    width: 100%;
    min-height: 260px;
  }
  .signList .sign {
    margin: 5px;
    float: left;
    width: 240px;
    cursor: pointer;
    padding: 2px;
    position: relative;
  }
  .signList .sign img{
   width: 100%;
   border: 0;
   padding: 0;
   margin: 0;
  }
   .signList .sign .drop{
      position: absolute;
    right: 5px;
    top: 5px;
    color: red;
  }
  .signList .active{
    border: 2px solid #1890ff;
  }
</style>
